<template>
  <div class="property-box absolute white-bg hover-border-active">
    <div class="flex border-bottom pd10 flex-between color-info size18">
      <span>属性</span>
      <i class="el-icon-close  pointer" @click="$emit('close')"></i>
    </div>
    <div class="pd10 widget-dialog widget-search">
      <form-create
        v-if="editShow"
        v-model="editFormInstance"
        :value.sync="editData"
        :rule="editRule"
        :option="editOptions"
      />
      <div class="text-right pd10">
        <el-button
          type="primary"
          size="small"
          @click="saveData"
          style="margin-right:10px"
          >保存属性</el-button
        >
        <el-popconfirm
          confirm-button-text="删除"
          confirm-button-type="danger"
          cancel-button-text="取消"
          icon="el-icon-info"
          icon-color="red"
          title="请确认删除当前节点?"
          @onConfirm="deleteNode"
        >
          <el-button type="danger" slot="reference" size="small"
            >删除</el-button
          >
        </el-popconfirm>
      </div>
    </div>
  </div>
</template>
<script>
import { flowGetRoleList, flowGetUserListByRoleId as getUserApi } from "@/api";
import { editRule, searchRule } from "./fromRules";
import { editFormOptions, getData } from "@/formRules";
import { options } from "@/utils/fetch";
import { deflate } from "three/examples/jsm/libs/fflate.module";
export default {
  data() {
    return {
      editFormInstance: {},
      editData: {},
      editRule: editRule(),
      editOptions: editFormOptions(),
      editShow: false,
      userOptions: []
    };
  },
  props: {
    propertyData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    rouleOptions: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  watch: {
    "editData.handelRole"(n) {
      if (n) {
        this.getUserList();
      } else {
        this.$nextTick(() => {
          this.editFormInstance.updateRule("handelUser", {
            options: [],
            value: []
          });
        });
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.editShow = true;
      this.editData = this.propertyData;
      if (this.editData?.handelUser) {
        this.editData.handelUser = this.editData.handelUser.split(",");
      }
      this.$nextTick(() => {
        this.editFormInstance.updateRule("handelRole", {
          options: this.rouleOptions
        });
      });
    }, 100);
  },
  methods: {
    /**
     * @name 获取用户列表
     */
    async getUserList() {
      let params = {
        page: 1,
        size: 1000,
        roleId: this.editData?.handelRole
      };
      let options = [];
      let { data } = await getUserApi(params);
      data?.list?.forEach(e => {
        options.push({
          value: e.userName,
          label: e.customName ? e.customName + `(${e.userName})` : e.userName
        });
      });
      this.$nextTick(() => {
        this.editFormInstance.updateRule("handelUser", {
          options: options
        });
      });
    },
    saveData() {
      this.$emit("saveProperty", this.editData);
    },
    deleteNode() {
      this.$emit("deleteNode", this.editData);
      this.$emit("close");
    }
  }
};
</script>
<style lang="scss" scoped>
.property-box {
  width: 400px;
  height: 400px;
  z-index: 999999;
  right: 12px;
  top: 80px;
}
</style>
